<template>
	<view>
		<!-- #ifdef MP||APP-PLUS -->
		<view v-if="isNavbar || isPrev" class="navbar-box"
			:style="{ height: menuClientRect.height + statusBar + menuClientRect.searchHeight + 'px','background': bg }">
			<view class="status-bar" :style="{ height: statusBar + 'px' }"></view>
			<view v-if="isNavTitle" class="navbar"
				:style="{ 'color':fontColor,height: menuClientRect.height + 'px','line-height': menuClientRect.height + 'px' }">
				<view v-if="isPrev" class="iconfont prevPage disflex"
					:style="{ 'color':fontColor,'line-height': menuClientRect.height + 'px' }"
					:class="{'backPage': iSimmersive && !isTitle,'statusLine': iSimmersive && scroll < 10}"
					@click="prev">
					<u-icon :color="fontColor" name="arrow-left"></u-icon>
				</view>
				<view v-if="isTitle" class="title over_1"
					:style="{ 'color':fontColor,height: menuClientRect.height + 'px','line-height': menuClientRect.height + 'px' }">
					{{ title }}
				</view>
			</view>
		</view>
		<view v-if="placeholder" class="placeholder-box" style="width: 100%;"
			:style="{ height: menuClientRect.height - 1 + menuClientRect.searchHeight + statusBar + 'px' }"></view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: [String, Number],
				default: 0
			},
			scroll: {
				type: [String, Number],
				default: 0
			},
			placeholder: {
				type: Boolean,
				default: false
			},
			isShow: {
				type: Boolean,
				default: true
			},
			isPrev: {
				type: Boolean,
				default: true
			},
			isNavTitle: {
				type: Boolean,
				default: true
			},
			// 导航栏标题
			title: {
				type: String,
				default: ''
			},
			// 标题的颜色
			titleColor: {
				type: String,
				default: '#000000'
			},
			// 对象形式，因为用户可能定义一个纯色，或者线性渐变的颜色
			background: {
				type: String,
				default: 'transparent'
			},
			iSimmersive: {
				type: Boolean,
				default: false
			},
			onBack: {
				type: Function,
				default: null
			}
		},
		data() {
			return {
				statusBar: 10,
				menuClientRect: {
					height: 35,
					searchHeight: 0
				},
				bg: "",
				fontColor: "",
				isTitle: true,
				isNavbar: true
			};
		},
		mounted() {
			let systemInfoSync = uni.getSystemInfoSync();
			// #ifdef MP || APP-PLUS
			this.statusBar = systemInfoSync.statusBarHeight;
			// #endif

			// #ifdef MP
			this.menuClientRect = uni.getMenuButtonBoundingClientRect();
			// #endif

			this.isNavbar = this.isShow;
			this.bg = this.background;
			this.fontColor = this.titleColor;
			if (this.iSimmersive) {
				// this.isTitle = false;
				// this.isNavbar = false;
				this.setNavigationBarColor("#ffffff");
			} else {
				this.bg = this.background != 'transparent' ? this.background : "#ffffff";
				this.setNavigationBarColor(this.titleColor);
			}

			if (!this.isNavTitle) {
				this.menuClientRect.height = 0;
			}

			// #ifdef H5
			this.statusBar = 0;
			// #endif 

			// #ifdef APP-PLUS || MP
			this.menuClientRect.height += 10;
			// #endif

			let navHeight = this.menuClientRect.height + this.statusBar;

			// #ifdef H5
			this.$emit("input", systemInfoSync.screenHeight - navHeight - systemInfoSync.windowBottom)
			// #endif

			// #ifdef APP-PLUS
			this.$emit("input", systemInfoSync.windowHeight - navHeight - systemInfoSync.windowBottom)
			// #endif

			// #ifdef MP
			this.$emit("input", systemInfoSync.screenHeight - navHeight, navHeight)
			// #endif
		},
		methods: {
			onJumpSearch() {
				this.$utils.navigateTo("search/index");
			},
			prev() {
				if (this.onBack) {
					this.onBack();
				} else {
					// #ifdef H5
					let canNavBack = getCurrentPages();
					if (canNavBack && canNavBack.length > 1) {
						uni.navigateBack();
					} else {
						if (canNavBack.length <= 1) {
							this.$utils.switchTab("index/index");
						}
					}
					// #endif

					// #ifndef H5
					uni.navigateBack();
					// #endif
				}
			},
			setNavigationBarColor(color) {
				this.fontColor = color;
				// #ifdef MP-WEIXIN
				wx.setNavigationBarColor({
					frontColor: color,
					backgroundColor: '#ff0000',
					animation: {
						duration: 200,
						timingFunc: 'easeIn'
					}
				});
				// #endif

				// #ifdef APP-PLUS
				setTimeout(() => {
					if (color == "#000000") {
						plus.navigator.setStatusBarStyle("dark");
					} else {
						plus.navigator.setStatusBarStyle("light");
					}
				}, 200);
				// #endif
			},
			color2Rgb(string) {
				let color = string.toLowerCase();
				if (/^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/.test(color)) {
					if (color.length === 4) {
						let colorNew = "#";
						for (let i = 1; i < 4; i += 1) {
							colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
						}
						color = colorNew;
					}

					let array = [];
					for (let i = 1; i < 7; i += 2) {
						array.push(parseInt("0x" + color.slice(i, i + 2)));
					}

					return array.join(",");
				} else {
					return string;
				}
			}
		},
		watch: {
			scroll: {
				handler(newValue, oldValue) {
					if (!this.iSimmersive) {
						return false;
					}
					let bg = "#ffffff";
					let fontColor = "#000000";
					if (this.background != 'transparent') {
						bg = this.background;
						fontColor = "#ffffff";
					}

					let rgba = this.color2Rgb(bg);

					if (newValue >= 10 && newValue <= 50) {
						this.bg = "rgba(" + rgba + ",.3)";
						this.setNavigationBarColor(fontColor);
						this.isTitle = true;
						this.isNavbar = true;
					} else if (newValue >= 51 && newValue <= 99) {
						this.bg = "rgba(" + rgba + ",.7)";
						this.setNavigationBarColor(fontColor);
						this.isTitle = true;
						this.isNavbar = true;
					} else if (newValue >= 100) {
						this.bg = "rgba(" + rgba + ",1)";
						this.setNavigationBarColor(fontColor);
						this.isTitle = true;
						this.isNavbar = true;
					} else if (newValue < 10) {
						this.bg = "rgba(" + rgba + ",0)";
						this.setNavigationBarColor("#ffffff");
						this.isTitle = false;
						this.isNavbar = false;
					}
				},
				deep: true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.placeholder-box {
		height: 35px;
	}

	.navbar-box {
		position: fixed;
		z-index: 100000;
		topL: 0;
		left: 0;
		width: 100%;
		height: 35px;

		.status-bar {
			width: 100%;
			float: left;
		}

		.search-box {
			width: 100%;
			height: 45px;
			float: left;

			.search-input {
				position: relative;
				color: #fff;
				height: 35px;
				line-height: 35px;
				border-radius: 50rpx;
				margin: 10rpx 20rpx;
				background-color: #fff;
				color: #666;

				&::before {
					position: absolute;
					content: "\e629";
					left: 30rpx;
					top: 0rpx;
					font-size: 38rpx;
					color: #aaa;
				}

				text {
					padding-left: 90rpx;
					font-size: 30rpx;
				}
			}
		}

		.navbar {
			float: left;
			width: 100%;
			position: relative;

			.title {
				width: 80%;
				margin: 0 auto;
				text-align: center;
				font-size: 33rpx;
				/* #ifdef H5 */
				font-size: 29rpx;
				/* #endif */
			}

			.prevPage {
				position: absolute;
				left: 20rpx;
				top: 2%;
				width: 60rpx;
				height: 60rpx;
				top: 50%;
				transform: translateY(-50%);
			}

			.backPage {
				background-color: rgba(0, 0, 0, 0.5);
				border-radius: 50%;

				text {
					color: #fff;
					position: absolute;
					left: 30%;
					top: 50%;
					transform: translate(-30%, -50%);
				}
			}

			/* #ifdef H5 */
			.statusLine {
				top: 20rpx;
			}

			/* #endif */
		}
	}
</style>